import { StyleSheet } from 'react-native';
import {
  APP_LIGHT_BACKGROUND_YELLOW,
  APP_BLACK,
  APP_YELLOW,
  INPUT_BACKGROUND_GREY_SECOND
} from '../../constant/color';
import { phonePx } from '../../util/adapt';
import { getScreenInfo } from '../../util/screen';

const { width } = getScreenInfo({});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  content: {
    width,
    alignItems: 'center'
  },
  button: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width,
    paddingVertical: phonePx(18),
    paddingHorizontal: phonePx(20)
  },
  item: {
    width,
    paddingVertical: phonePx(18),
    paddingHorizontal: phonePx(20)
  },
  loadTitle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: phonePx(92)
  },
  title: {
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '400',
    marginLeft: phonePx(8)
  },
  loadAvatar: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  avatar: {
    width: phonePx(30),
    height: phonePx(30),
    borderRadius: phonePx(15),
    marginRight: phonePx(18)
  },
  arrow: {
    width: phonePx(6.8),
    height: phonePx(11.8)
  },
  setAvatarIcon: {
    width: phonePx(18),
    height: phonePx(18)
  },
  setIcon: {
    width: phonePx(17),
    height: phonePx(18)
  },
  setGenderIcon: {
    width: phonePx(20),
    height: phonePx(18)
  },
  input: {
    height: phonePx(50),
    marginTop: phonePx(12),
    backgroundColor: INPUT_BACKGROUND_GREY_SECOND,
    fontSize: phonePx(14),
    color: APP_BLACK,
    lineHeight: phonePx(20),
    paddingHorizontal: phonePx(16),
    borderRadius: phonePx(4)
  },
  loadGender: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  selectGender: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingTop: phonePx(20)
  },
  loadGenderIcon: {},
  genderIcon: {
    width: phonePx(30),
    height: phonePx(30)
  },
  genderDesc: {
    fontSize: phonePx(12),
    color: APP_BLACK,
    fontWeight: '400',
    lineHeight: phonePx(17),
    marginBottom: phonePx(1),
    marginLeft: phonePx(8)
  },
  genderSelectedIcon: {
    position: 'absolute',
    left: -phonePx(8),
    bottom: -phonePx(4),
    width: phonePx(16),
    height: phonePx(16)
  },
  save: {
    position: 'absolute',
    alignSelf: 'center',
    width: phonePx(270),
    height: phonePx(50),
    borderRadius: phonePx(8),
    backgroundColor: APP_YELLOW,
    justifyContent: 'center',
    alignItems: 'center',
    bottom: phonePx(30)
  },
  saveDesc: {
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '500'
  }
});

export default styles;
